<template>
   <div class="chart-container"> 
    <button @click="changeChartType('line')" class="chart-button">折线图</button>
    <button @click="changeChartType('bar')" class="chart-button">柱状图</button>
    <button @click="changeChartType('pie')" class="chart-button">饼图</button>
    <button @click="changeChartType('scatter')" class="chart-button">散点图</button>
  </div>
</template>


<script>
export default {
  methods: {
    changeChartType(type) {
      this.$emit('chart-type-changed', type);
    }
  }
}
</script>

<style>

.chart-button {
  margin-bottom: 10px;
  padding: 8px 16px;
  font-size: 14px;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.chart-button:hover {
  background-color: #e0e0e0;
}
</style>